<template>
	<view class="count">
		<view class="avart">
			<button :plain="true" @click="chooseavatarFn" class="btnAva">
				<image src="/static/xiangji.png" class="xiangji" mode=""></image>
			</button>
			<image :src="avatar" class="avatImg" mode="aspectFill"></image>
		</view>
		<view class="nickName">
			<view class="top f f-a-c f-j-b">
				<view class="name">
					昵称
				</view>
				<view class="inpN">
					<input type="text" v-model="name" placeholder="请输入昵称" class="inp" name="" id="">
				</view>
			</view>
			<view class="xian">

			</view>
			<view @click="show=true" class="top f f-a-c f-j-b">
				<view class="name">
					性别
				</view>
				<view class="inpN f f-a-c">
					{{sex}}
					<image src="/static/my/youjian.png" class="youjian" mode=""></image>
				</view>
			</view>
			<view class="xian">

			</view>
			<view class="top f f-a-c f-j-b">
				<view class="name">
					手机号
				</view>
				<view class="inpN">
					<input type="text" v-model="userinfo.mobile" :disabled="true" placeholder="请输入手机号" class="inps"
						name="" id="">
				</view>
			</view>
			<view class="xian">

			</view>
		</view>
		<view @click="comfig" class="comfig">
			保存
		</view>
		<u-select v-model="show" @confirm="confirmFn" :list="list"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: uni.getStorageSync('userInfo').avatar || '/static/avat.png',
				show: false,
				userinfo: uni.getStorageSync('userInfo'),
				phone: '',
				name: uni.getStorageSync('userInfo').nickname,
				sex: uni.getStorageSync('userInfo').gender == 1 ? '男' : '女',
				list: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
			}
		},
		methods: {
			// 点击保存
			async comfig() {
				let n = await this.$api.renewalUserInfo({
					avatar: this.avatar,
					nickname: this.name,
					gender: this.sex == '男' ? 1 : 2
				})

				if (n.code == 200) {
					// this.$msg(n.msg)
					setTimeout(async () => {
						let m = await this.$api.userInfo()
						uni.setStorageSync('userInfo', m.data)
						uni.setStorageSync('upload_token', m.data.upload.token)
						uni.setStorageSync('domain', m.data.upload.domain)
						uni.setStorageSync('upload_domain', m.data.upload.endpoint)
						uni.navigateBack()
					}, 800)
				}
			},
			confirmFn(e) {
				this.sex = e[0].label
			},
			//修改头像
			chooseavatarFn(e) {
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: uni.getStorageSync('upload_domain'), // 上传地址
							filePath: tempFilePaths[0], // 要上传的文件路径
							name: 'file', // 上传文件对应的 key 值
							method: 'POST',
							formData: {
								key: `${this.$u.timeFormat(new Date(), 'yyyy-mm-dd')}/${this.randomString()}.png`,
								token: uni.getStorageSync('upload_token'),
							},
							success: (uploadRes) => {
								// 上传成功处理逻辑
								this.$msg('上传成功')
								let url = JSON.parse(uploadRes.data).key
								this.avatar = uni.getStorageSync('domain') + '/' + url
							},
							fail: function(error) {
								// 上传失败处理逻辑
								this.$msg('上传失败')
							},
							complete: function() {}
						});
					},
					fail: err => {

					}
				})
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comfig {
		width: 90%;
		margin: 0 auto;
		height: 88rpx;
		line-height: 85rpx;
		background: #977961;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: center;
		color: #ffffff;
	}

	.nickName {
		padding: 70rpx 40rpx;

		.xian {
			height: 2rpx;
			width: 100%;
			margin: 40rpx 0;
			background-color: #f6f6f5;
		}

		.top {
			.name {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 600;
				text-align: LEFT;
				color: #2f2319;
			}

			.inpN {
				.youjian {
					width: 16rpx;
					height: 24rpx;
					margin-left: 15rpx;
				}

				.inp {
					border: none;
					text-align: right;
				}

				.inps {
					border: none;
					text-align: right;
					color: #cbc2bb;
				}
			}
		}
	}

	.avart {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		margin-left: 50%;
		transform: translateX(-50%);

		.btnAva {
			position: absolute;
			border: none;
			z-index: 999;
			width: 60rpx;
			height: 60rpx;
			padding: 0;
			margin: 0;
			bottom: 0;
			right: -5rpx;

			.xiangji {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.avatImg {
			width: 160rpx;
			height: 160rpx;
			border-radius: 80rpx;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		padding-top: 50rpx;
		background-color: #fffefc;
	}
</style>